<template>
	<view class="purchase">
		<view class="deatil">
			<view class="header">
				<image :src="query.course_info.image" mode="" class="left_img"></image>
				<view class="right_comlumn">
					<view class="title">
						{{query.course_info.title}}
					</view>
					<view class="center">
						<view class="row-box">
							<view v-for="(item,index) in query.course_info.label_list" :key="index" class="Oitem">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="price" v-if="query.course_form !== 'bag'">
						<text class="size1 color1 fw1">￥</text>
						<text class="size2 color1 fw1">{{query.course_info.price}}</text>
						<text class="size3 color1 fw2">/{{query.course_info.unit}}</text>
						<text class="size3 color2 fw3 lh">￥{{query.course_info.cost}}/{{query.course_info.unit}}</text>
					</view>
					<view class="price" v-else>
						<text class="size1 color1 fw1">￥</text>
						<text class="size2 color1 fw1">{{query.pay_money}}</text>
						<text class="size3 color1 fw2">/课</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="row2 mb">
					<view class="left_title">
						上课场地
					</view>
					<view class="right-box" @click="choiceEnds">
						<text class="size"
							:style="{color:from.shop_id?'#000000':'#999999;'}">{{from.shop_id ? query.shop_info.name:'请选择上课场地'}}</text>
						<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="img"></image>
					</view>
				</view>

				<view class="row2">
					<view class="left_title">
						上课教练
					</view>
					<view class="right-box" @click="selectCoach" v-if="query.form == 'exp'">
						<image :src="query.coach_info.avatar" mode="" class="avater"></image>
						<text class="size"
							:style="{color:from.coach_id?'#000000':'#999999;'}">{{query.coach_list.length ? query.coach_info.nickname:'暂无教练'}}</text>
						<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="img"></image>
					</view>
					<view class="right-box" v-else-if="query.form == 'main'">
						<image :src="query.coach_info.avatar" mode="" class="avater"></image>
						<text class="size" :style="{color:from.coach_id?'#000000':'#999999;'}">{{query.coach_info.nickname}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="second" v-if="query.form == 'main' && query.course_form == 'pt'">
			<view class="title_box1">
				<text class="title_com">课次</text>
				<text class="size">
					{{query.course_info.num}}节起售
				</text>
				<text v-if="query.cue_phrases" class="phrases">{{query.cue_phrases}}</text>
			</view>
			<view class="choose">
				<view class="children">
					<view class="select">
						<view v-for="(item,index) in classNumber" :key="index"
							style="background-repeat: no-repeat; background-size: cover;"
							:class="classActive === index ?'classActiveNumber':'classNumber'"
							@click.stop="updateClassActive(item,index)"
							:style="{backgroundImage:`url(${$IMG_URL('/static/coursebg/bg1.png')})`}">
							<view class="tag" v-if="item.discounts">
								{{item.discounts}}
							</view>
							<text>{{item.num + '节'}}</text>
						</view>
					</view>
					<view :class="classActive == -1 ?'active-custom-number-box':'custom-number-box'"
						@click.stop="updateClassActive(customNumber,-1)">
						<view :class="classActive == -1 ?'active_left_name':'left_name'">
							自定义数量
						</view>
						<view class="custom_right">
							<image :src="$IMG_URL('/static/coach/reduce.png')" mode="" class="tag"
								@click.stop="increaseCustomNumber('reduce')"></image>

							<input class="custom-number-size" type="number" v-model.number="customNumber" @blur="handleInputChange"
								@keyup.enter="handleInputChange" :min="query.course_info.num">
							<image :src="$IMG_URL('/static/coach/add.png')" mode="" class="tag"
								@click.stop="increaseCustomNumber('add')">
							</image>
						</view>
					</view>
				</view>

				<view class="price_total">
					<text class="title">
						总金额
					</text>
					<text>
						￥{{query.money}}
					</text>
				</view>
			</view>
			<view class="discount-coupon" v-if="query.is_favor == 0">
				<view class="discount-coupon-left">
					<view class="title">
						优惠券
					</view>
					<text class="size11">
						{{query.use_num}}
					</text>
					<text class="size12">
						张可用
					</text>
				</view>
				<view class="discount-coupon-right" @click="couponShow = true">
					<text class="color2" v-if="query.use_num == 0">暂无可用优惠券</text>
					<text class="color1"
						v-else-if="query.coupon_money == 0 || query.use_num !== 0">{{'-￥' + query.coupon_money}}</text>
					<text class="color1" v-else>请选择</text>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="uimg"></image>
				</view>
			</view>
			<view class="discount-coupon" v-else>
				<view class="discount-coupon-left">
					<view class="title">
						{{query.favor_str}}
					</view>
				</view>
				<view class="discount-coupon-right">
					<text class="color1">{{'-￥' + query.coupon_money}}</text>
				</view>
			</view>
		</view>

		<view class="three" v-else>
			<view class="choose1">
				<view class="price_total1">
					<text class="title">
						总金额
					</text>
					<text>
						￥{{query.money}}
					</text>
				</view>
			</view>

			<view class="discount-coupon">
				<view class="discount-coupon-left">
					<view class="title">
						优惠券
					</view>
					<text class="size11">
						{{query.use_num}}
					</text>
					<text class="size12">
						张可用
					</text>
				</view>
				<view class="discount-coupon-right" @click="couponShow = true">
					<text class="color2" v-if="query.use_num == 0">暂无可用优惠券</text>
					<text class="color1"
						v-else-if="query.coupon_money == 0 || query.use_num !== 0">{{'-￥' + query.coupon_money}}</text>
					<text class="color1" v-else>请选择</text>
					<image :src="$IMG_URL('/static/home/indicate.png')" mode="" class="uimg"></image>
				</view>
			</view>
		</view>

		<!-- 支付方式选择模块 -->
		<view class="payment-section">
			<view class="payment-options">
				<!-- 微信支付选项 -->
				<view class="payment-option" @click="selectPayment(0)">
					<image src="/static/payment/wxzf.png" class="payment-icon"></image>
					<text class="payment-name">微信支付</text>
					<view class="custom-radio">
						<view class="custom-icon" :class="{ active: paymentOptions[0].checked }">
							<text class="icon-check" v-if="paymentOptions[0].checked">✓</text>
						</view>
					</view>
				</view>

				<!-- 其他支付方式选项 -->
				<view class="payment-option" v-if="!audit" @click="selectPayment(1)">
					<text class="payment-name">其它支付方式</text>
					<text class="text-name">支持支付宝、银联</text>
					<view class="custom-radio">
						<view class="custom-icon" :class="{ active: paymentOptions[1].checked }">
							<text class="icon-check" v-if="paymentOptions[1].checked">✓</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="warm-tip">
			<view class="title">
				温馨提示
			</view>
			<u-parse :html="query.reminder"></u-parse>
		</view>
		<view class="empty"></view>

		<view class="foot_box">
			<view class="agreement">
				<view class="left" @click="whetherAgreement = !whetherAgreement">
					<image
						:src="whetherAgreement?$IMG_URL('/static/newVersion/agreement2.png'):$IMG_URL('/static/newVersion/agreement1.png')"
						mode="" class="icon"></image>
					<text class="size1">我已阅读并同意:</text>
				</view>
				<view style="margin-top: 6rpx;">
					<text class="size2" @click="routeAreement">《优机小羊课程购买协议》、</text>
					<text class="size2" @click="routeGzAreement">《优机小羊会员守则》、</text>
					<text class="size2" @click="routeShAreement">《优机小羊私教售后规则》</text>
				</view>
			</view>
			<view class="btn_box">
				<view class="left">
					<view class="price_box">
						<text class="unit">￥</text>
						<text class="number">{{query.pay_money}}</text>
					</view>
					<view class="price_box">
						<text class="size23">已优惠</text>
						<text class="size24">￥{{query.coupon_money}}</text>
					</view>
				</view>
				<view class="rightbtn" @click="paymentSuccess">
					立即支付
				</view>
			</view>
		</view>

		<FieldPopupVue :popupShow="popupShow" :FieldList="query.shop_list" @sure="sure" @close="closeField"
			@changeActiveIndex="changeActiveIndex" :activeIndex="FieldIndex"></FieldPopupVue>
		<coupon :couponShow="couponShow" :tabsList="coupontabsList" :TabsCurrent="couponTabsCurrent"
			:couponActive="couponActive" @close="offcoupon" @changeTabs="changeCouponTabs"
			:popupList="!couponTabsCurrent?query.use_list:query.dis_list" @toggle="toggles"
			@changeActive="changeCouponActive"></coupon>
		<popupVue :title="'选择教练'" @close="skilledClose" @sure="skilledSure" :couponShow="skilledShow">
			<view class="comlum_Y2">
				<scroll-view scroll-y="true" class="scroll-Y3">
					<view class="scroll-Y4">
						<view v-for="(item,index) in query.coach_list" :key="index" class="item"
							:style="{border: coachIndex == index ?'2rpx solid #73F0EA':'2rpx solid #ffffff'}"
							@click.stop="changeCoach(item, index)">
							<image :src="$IMG_URL('/static/shop/recommend.png')" mode="aspectFit" class="recommend">
							</image>
							<image :src="item.avatar" mode="aspectFill" class="Coach-profile-picture"></image>
							<view class="right_comlumn">
								<view class="name">
									{{item.nickname}}
								</view>
								<view class="grade-box">
									<view class="grade">
										{{item.serve}}分
									</view>
									<view class="dashed-box"></view>
									<view class="good-reputation">
										好评率{{item.vea}}
									</view>
								</view>
								<view class="scound-box">
									<view class="one_box">
										<text class="size1 row1">证书</text>
										<text class="size2 row1">{{item.cert_num}}</text>
										<text class="size1 row1">本</text>
										<view class="dashed-box"></view>
										<view class="one_box">
											<text class="size1 row1">上课</text>
											<text class="size2 row1">{{item.course_num}}</text>
											<text class="size1 row1">节</text>
										</view>
									</view>
									<view class="bottom">
										<view v-for="(skillItem,skillIndex) in item.domain_list" :key="skillIndex" class="skillItem">
											{{skillItem.title}}
										</view>
									</view>
								</view>
								<view class="content">
									{{item.bio}}
								</view>
							</view>
						</view>
						<view style="width: 702rpx; height: 70rpx;"></view>
					</view>
				</scroll-view>
			</view>
		</popupVue>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import coupon from '../../member/components/coupon.vue'
	import FieldPopupVue from '../components/Field-popup.vue'
	import popupVue from '@/components/popup.vue'
	import Oitem from '@/components/coachItem.vue';
	import {
		pay
	} from '@/api/pay.js'
	import {
		courseBuyInfo
	} from '@/api/coach.js'
	import {
		versions
	} from '@/api/common.js'

	export default {
		components: {
			FieldPopupVue,
			coupon,
			popupVue,
			Oitem
		},
		data() {
			return {
				audit: 0,
				loading: false,
				skilledShow: false,
				from: {
					course: 'course',
					coach_id: '',
					shop_id: '',
					coupon_id: '',
					buy_num: '',
					par: '',
				},
				coachIndex: null,
				// 优惠券相关
				couponShow: false,
				whetherAgreement: false,
				coupontabsList: [{
						name: '可用优惠券(0)'
					},
					{
						name: '不可用优惠券(0)'
					}
				],
				couponTabsCurrent: 0,
				couponActive: null,
				popupList: [],
				// 课程相关
				query: {},
				classNumber: [],
				classActive: 0,
				customNumber: 1,
				interests: ``,
				choiceShow: false,
				popupShow: false,
				Field: [],
				FieldIndex: 0,
				// 支付方式相关
				paymentOptions: [{
						name: '微信支付',
						value: 'wechat',
						checked: true
					},
					{
						name: '其他支付方式',
						value: 'other',
						checked: false
					}
				]
			}
		},
		created() {
			this.getVersions()
		},
		onLoad(e) {
			if (e.course) {
				this.from.course = e.course
				this.onLoadInfo()

			}
		},
		methods: {
			getVersions() {
				versions().then(({
					data: res
				}) => {
					// console.log('res', res);
					if (res.code == 1) {
						this.audit = res.data.audit
					}
				})
			},
			// 选择支付方式
			selectPayment(index) {
				// 取消所有选项的选中状态
				this.paymentOptions.forEach(opt => opt.checked = false);
				// 选中当前点击的选项
				this.paymentOptions[index].checked = true;

			},

			// 处理自定义数量输入
			handleInputChange() {
				const numValue = parseInt(this.customNumber)
				if (isNaN(numValue) || numValue < this.query.course_info.num) {
					console.log('Invalid number or below minimum');
					this.customNumber = this.query.course_info.num;
					uni.showToast({
						title: '自定义数量小于起售量',
						icon: 'none'
					})
				}
				this.from.buy_num = this.customNumber
				this.getcourseBuyInfo()
				console.log(111, this.customNumber);
			},

			// 选择教练
			selectCoach() {
				if (this.query.form == 'exp') {
					if (this.query.coach_list.length) {
						this.skilledShow = true
					} else {
						uni.showToast({
							title: '暂无教练',
							icon: 'none'
						})
					}
				}
			},

			changeCoach(item, index) {
				console.log('选择教练', index);
				if (this.coachIndex == index) {
					this.coachIndex = null
				} else {
					this.coachIndex = index
				}
			},

			skilledSure() {
				this.from.coach_id = this.query.coach_list[this.coachIndex].coach_id
				this.getcourseBuyInfo()
				this.skilledShow = false
			},

			skilledClose() {
				this.coachIndex = null
				this.skilledShow = false
			},

			findCoachName(data, list) {
				var dName = null
				if (data) {
					if (list.length) {
						list.forEach(i => {
							if (data == i.coach_id) {
								console.log('i', i.name);
								dName = i
							}
						})
					}
				}
				return dName
			},

			findshopName(data, list) {
				var dName = ''
				if (data) {
					if (list.length) {
						list.forEach(i => {
							if (data == i.shop_id) {
								console.log('i', i.name);
								dName = i.name
							}
						})
					}
				}
				return dName
			},

			onLoadInfo() {
				this.loading = true
				courseBuyInfo(this.from).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.loading = false
						this.query = res.data
						this.classNumber = res.data.task_list
						this.customNumber = res.data.course_info.num
						this.from.shop_id = res.data.shop_info.shop_id
						this.from.coupon_id = res.data.coupon_id
						this.coupontabsList[0].name = '可用优惠券(' + res.data.use_num + ')'
						this.coupontabsList[1].name = '不可用优惠券(' + res.data.dis_num + ')'
						this.$u.mpShare = {
							title: this.query.course_info.title,
							path: '/pageA/shop/coach/purchase?course=' + this.from.course + '&is_share=' + 1,
							imageUrl: this.query.course_info.image,
						}
						console.log('1111', this.from)
					}
				}).finally(() => {})
			},

			getcourseBuyInfo() {
				this.loading = true
				courseBuyInfo(this.from).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.loading = false
						this.query = res.data
						this.classNumber = res.data.task_list
						this.from.shop_id = res.data.shop_info.shop_id
						this.from.coupon_id = res.data.coupon_id
						this.coupontabsList[0].name = '可用优惠券(' + res.data.use_num + ')'
						this.coupontabsList[1].name = '不可用优惠券(' + res.data.dis_num + ')'
					}
				}).finally(() => {})
			},

			chekLogin_storid() {
				const obj = {
					code: 401,
					msg: '您尚未登录，是否立即登录？'
				}
				this.tokenShow = false
				this.$SHOWMODALMSG('登录提示', obj)
			},

			// 优惠券相关方法
			changeCouponTabs(data) {
				console.log('data', data);
				this.couponTabsCurrent = data
			},

			changeCouponActive(data) {
				console.log('data1111', data);
				this.couponActive = data
				this.from.coupon_id = this.query.use_list[data].coupon_id;
				this.getcourseBuyInfo()
				this.couponShow=false
			},

			toggles(message) {
				console.log('message', message);
				this.$set(this.popupList[message], 'open', !this.popupList[message].open);
			},

			offcoupon(data) {
				console.log('data', data);
				this.couponShow = data
			},

			// 支付处理
			paymentSuccess() {
				// 获取当前选中的支付方式
				var selectedPay = this.paymentOptions.find(opt => opt.checked).value;
				// 动态计算 is_form 值
				var dynamicIsForm = selectedPay === 'wechat' ? 0 : 2;

				// 准备公共参数（两种支付方式通用）
				this.from.buy_num = this.classActive === -1 ?
					this.customNumber :
					this.query.form === 'exp' ? '' : this.classNumber[this.classActive].num;

				var baseObj = {
					form: 'course',
					par: this.from.course,
					shop_id: this.query.shop_info.shop_id,
					payment_method: selectedPay,
					is_form: dynamicIsForm,
				};

				if (this.query.form == 'exp') {
					baseObj.coach_id = this.query.coach_info.coach_id;
				} else {
					baseObj.buy_num = this.from.buy_num;
					baseObj.coupon_id = this.from.coupon_id;
				}

				// 其他支付方式处理逻辑
				if (selectedPay === 'other') {
					// 检查是否同意协议
					if (!this.whetherAgreement) {
						this.showAgreementModal();
						return;
					}

					// 显示加载中提示
					uni.showLoading({
						title: '获取订单信息中...'
					});

					// 调用pay接口获取订单号（后端会在该接口返回order_no）
					pay(baseObj).then(({
						data: res
					}) => {
						// 隐藏加载提示
						uni.hideLoading();

						if (res.code == 1) {
							var orderNo = res.data && res.data.order_no;
							if (orderNo) {
								uni.navigateTo({
									url: `/pageA/shop/coach/pay?money=${this.query.pay_money}&courseId=${this.from.course}&is_form=${dynamicIsForm}&order_no=${orderNo}`
								});
							} else {
								// 订单号不存在的异常处理
								uni.showToast({
									title: '订单信息不完整',
									icon: 'none'
								});
								console.error('接口未返回order_no', res.data);
							}
						} else {
							// 接口返回错误信息
							uni.showToast({
								title: res.msg || '获取订单失败',
								icon: 'none'
							});
						}
					}).catch(err => {
						// 网络异常处理
						uni.hideLoading();
						console.error('获取订单接口调用失败', err);
						uni.showToast({
							title: '网络异常，请重试',
							icon: 'none'
						});
					});
					return;
				}

				// 微信支付逻辑（保持不变）
				var that = this;
				if (that.whetherAgreement) {
					pay(baseObj).then(({
						data: res
					}) => {
						if (res.code == 1) {
							// 调用微信支付
							uni.requestPayment({
								"timeStamp": res.data.timeStamp,
								"nonceStr": res.data.nonceStr,
								"package": res.data.package,
								"signType": res.data.signType,
								"paySign": res.data.paySign,
								success: function(rescc) {
									console.log('支付成功:' + JSON.stringify(rescc));
									uni.navigateTo({
										url: '/pageA/shop/coach/payment-success'
									});
								},
								fail: function(errcc) {
									console.log('支付失败:' + JSON.stringify(errcc));
									that.$refs.uToast.show({
										title: '支付已取消',
										type: 'error',
										icon: false,
									});
								}
							});
						} else if (res.code == 401) {
							this.$SHOWMODALMSG('', res);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				} else {
					this.showAgreementModal();
				}
			},

			// 协议弹窗公共方法
			showAgreementModal() {
				var that = this;
				uni.showModal({
					title: '优机小羊课程购买协议',
					content: '为了您能够正常使用我们的服务，您需要阅读并同意《优机小羊课程购买协议》。',
					showCancel: true,
					cancelText: '不同意',
					confirmText: '同意',
					confirmColor: '#73F0EA',
					success: function(res) {
						if (res.confirm) {
							that.whetherAgreement = true;
						} else {
							that.whetherAgreement = false;
						}
					}
				});
			},

			// 三个协议跳转规则
			routeGzAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'courserule'
				})
			},
			routeAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'course'
				})
			},
			routeShAreement() {
				uni.navigateTo({
					url: '/pageA/agreement/member?form=' + 'courseprocess'
				})
			},

			changeActiveIndex(message) {
				this.FieldIndex = message
				console.log(message);
			},

			sure() {
				this.from.shop_id = this.query.shop_list[this.FieldIndex].shop_id
				this.getcourseBuyInfo()
				this.popupShow = false
			},

			closeField() {
				this.popupShow = false
			},

			choiceEnds() {
				this.FieldIndex = 0
				this.popupShow = true
			},

			updateClassActive(item, index) {
				console.log('index', index, item);
				this.classActive = index;
				if (this.classActive == -1) {
					this.from.buy_num = item
				} else {
					this.from.buy_num = item.num
				}
				this.getcourseBuyInfo()
			},

			increaseCustomNumber(message) {
				this.classActive = -1
				if (message == 'reduce') {
					if (this.customNumber > this.query.course_info.num) {
						this.customNumber--
					} else {
						this.$refs.uToast.show({
							title: '数量已最低',
							type: 'success',
							icon: false
						})
					}
				} else {
					this.customNumber++
				}
				console.log('customNumber', this.customNumber);
				this.from.buy_num = this.customNumber
				this.getcourseBuyInfo()
			}
		}
	}
</script>

<style lang="scss">
	.custom-radio {
		display: flex;
		align-items: center;
		margin: 12rpx 0;

		.custom-icon {
			width: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			border: 2rpx solid #73F0EA;
			color: #666;
			background-color: #fff;
		}

		.custom-icon.active {
			background-color: #73F0EA;
			color: #fff;
			border-color: #73F0EA;
		}

		.icon-check {
			font-size: 24rpx;
			font-weight: bold;
		}
	}

	page {
		background: #e9e9e9;
	}

	.activeItem {
		border: 2rpx solid #73F0EA;
	}

	.purchase {
		display: flex;
		flex-direction: column;
		align-items: center;

		.deatil {
			width: 100%;
			height: 400rpx;
			background: #ffffff;
			padding: 22rpx 24rpx 34rpx;
			display: flex;
			flex-direction: column;

			.header {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #e9e9e9;

				.left_img {
					width: 230rpx;
					height: 170rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 16rpx;
					margin-right: 20rpx;
				}

				.right_comlumn {
					flex: 1;
					display: flex;
					flex-direction: column;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
						margin-bottom: 12rpx;
					}

					.center {
						flex: 1;
					}

					.row-box {
						display: flex;
						flex-direction: row;
						align-items: center;

						.Oitem {
							padding: 0 6rpx;
							background: #f6f6f6;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
							margin-right: 6rpx;
						}
					}

					.price {
						display: flex;
						flex-direction: row;
						align-items: baseline;

						.size1 {
							font-size: 24rpx;
						}

						.size2 {
							font-size: 32rpx;

						}

						.lh {
							text-decoration: line-through;
						}

						.size3 {
							font-size: 20rpx;

						}

						.color1 {
							color: #F37364;
						}

						.color2 {
							margin-left: 6rpx;
							color: #999999;
						}

						.fw1 {
							font-weight: 700;
						}

						.fw2 {
							font-weight: 500;
						}

						.fw3 {
							font-weight: 400;
						}
					}
				}
			}

			.bottom {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-top: 34rpx;

				.mb {
					margin-bottom: 32rpx;
				}

				.row2 {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;

					.left_title {
						flex: 1;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						letter-spacing: 0.62rpx;
					}

					.right-box {
						display: flex;
						flex-direction: row;
						align-items: center;

						.size {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: right;
							margin: 0 8rpx;
						}

						.img {
							width: 10rpx;
							height: 16rpx;
						}

						.avater {
							width: 40rpx;
							height: 40rpx;
							background: rgba(0, 0, 0, 0.00);
							border-radius: 50%;
						}
					}
				}
			}
		}

		.second {
			width: 100%;
			background: #ffffff;
			padding: 24rpx;
			margin-top: 16rpx;

			.title_box1 {
				display: flex;
				flex-direction: row;
				align-items: baseline;

				.title_com {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
					letter-spacing: 0.62rpx;
					margin-right: 6rpx;
				}

				.phrases {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					margin-left: 100rpx;
					color: #D774FA;

				}

				.size {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #999999;
				}
			}

			.choose {
				display: flex;
				flex-direction: column;
				width: 100%;
				padding: 24rpx 0 30rpx;
				border-bottom: 1rpx solid #e9e9e9;

				.children {
					display: flex;
					// flex-direction: column;
					// width: 100%;
				}

				.select {
					display: flex;
					width: 1000rpx;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					gap: 14rpx;
					margin-bottom: 24rpx;
					padding: 0 10rpx;

					.tag {
						position: absolute;
						top: 0;
						right: 0;
						padding: 0 10rpx 0 14rpx;
						height: 34rpx;
						background: #73f0ea;
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: center;
						color: #000000;
					}

					.classNumber {
						position: relative;
						width: 200rpx;
						height: 164rpx;
						background: #f6f6f6;
						border-radius: 16rpx;
						border: 4rpx solid #F6F6F6;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: right;
						color: #3b2315;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					 
					 text{
						 margin:10rpx 0 0 24rpx;
					 }

					.classActiveNumber {
						position: relative;
						width: 200rpx;
						height: 164rpx;
						background: rgba(129, 202, 197, 0.20);
						border: 4rpx solid #73F0EA;
						border-radius: 16rpx;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: right;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.custom-number-box {
					width: 600rpx;
					height: 342rpx;
					background: #f6f6f6;
					border-radius: 16rpx;
					border: 4rpx solid #f6f6f6;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.left_name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #3b2315;
					}
				}

				.custom_right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.tag {
						width: 40rpx;
						height: 40rpx;
						margin: 0 6rpx;
						
					}

					.custom-number-size {
						width: 56rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: center;
						color: #000000;
						letter-spacing: 0.31rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: none;
						outline: none;
					}
				}

				.active-custom-number-box {
					width: 600rpx;
					height: 342rpx;
					background: rgba(129, 202, 197, 0.20);
					border: 4rpx solid #73F0EA;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;

					.active_left_name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #73F0EA;
					}
				}

				.price_total {
					margin-top: 32rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #333333;

					.title {
						flex: 1;
					}
				}
			}

			.discount-coupon {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				width: 100%;
				padding-top: 34rpx;

				.discount-coupon-left {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: baseline;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-right: 10rpx;
					}

					.size11 {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #f37364;
					}

					.size12 {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;
					}
				}

				.discount-coupon-right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #f37364;
					letter-spacing: 0.7rpx;

					.color1 {
						color: #f37364;
					}

					.color2 {
						color: #b6b6b6;
					}

					.uimg {
						width: 10rpx;
						height: 16rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

		.three {
			width: 100%;
			background: #ffffff;
			padding: 24rpx;
			margin-top: 16rpx;

			.choose1 {
				padding: 0 0 30rpx;
				display: flex;
				flex-direction: column;
				width: 100%;
				border-bottom: 1rpx solid #e9e9e9;
			}

			.price_total1 {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #333333;

				.title {
					flex: 1;
				}
			}

			.discount-coupon {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				width: 100%;
				padding-top: 34rpx;

				.discount-coupon-left {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: baseline;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-right: 10rpx;
					}

					.size11 {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #f37364;
					}

					.size12 {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;
					}
				}

				.discount-coupon-right {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #f37364;
					letter-spacing: 0.7rpx;

					.color1 {
						color: #f37364;
					}

					.color2 {
						color: #b6b6b6;
					}

					.uimg {
						width: 10rpx;
						height: 16rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

		// 支付模块样式
		.payment-section {
			width: 100%;
			border-top: 1rpx solid #e9e9e9;
			background: #ffffff;
			padding: 0 24rpx 24rpx 24rpx;
			margin-top: 16rpx;

			.payment-options {
				width: 100%;
			}

			.payment-option {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				padding: 0 2rpx;

				// &:not(:last-child) {
				// 	border-bottom: 1rpx solid #f5f5f5;
				// }
			}

			.payment-icon {
				width: 32rpx;
				height: 28rpx;
				margin-right: 16rpx;
				border-radius: 8rpx;
			}

			.payment-name {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;
				letter-spacing: 0.62px;
			}

			.text-name {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				margin-right: 16rpx;
				color: #666666;
				letter-spacing: 0.62px;
			}
		}
	}

	.comlum_Y2 {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.item2 {
			width: 702rpx;
			height: 372rpx;
		}

		.scroll-Y3 {
			width: 100%;
			height: 60vh;
			background: #e9e9e9;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 20rpx;

			.scroll-Y4 {
				width: 100%;
				background: #e9e9e9;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.item {
				margin-bottom: 20rpx;
				width: 702rpx;
				height: 352rpx;
				background: #ffffff;
				border-radius: 16rpx;
				position: relative;
				padding: 20rpx;
				border: 2rpx solid #ffffff;
				display: flex;
				flex-direction: row;

				.Coach-profile-picture {
					width: 234rpx;
					height: 310rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 16rpx;
					margin-right: 20rpx;
				}

				.recommend {
					position: absolute;
					top: 0;
					right: 0;
					width: 136rpx;
					height: 38rpx;
				}

				.right_comlumn {
					display: flex;
					flex-direction: column;
					width: 408rpx;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-bottom: 4rpx;
					}

					.grade-box {
						padding-bottom: 10rpx;
						width: 100%;
						border-bottom: 1rpx dashed #e9e9e9;
						display: flex;
						flex-direction: row;
						align-items: center;

						.grade {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #f37364;
						}

						.good-reputation {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}

					.scound-box {
						display: flex;
						flex-direction: column;
						width: 100%;
						padding: 16rpx 0 14rpx;
						border-bottom: 1rpx dashed #e9e9e9;

						.one_box {
							display: flex;
							flex-direction: row;
							align-items: center;

							.dashed-box {
								width: 0rpx;
								height: 28rpx;
								border: 1rpx solid #e9e9e9;
								margin: 0 11rpx;
							}

							.row1 {
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
							}

							.size1 {
								color: #333333;
							}

							.size2 {
								color: #73F0EA;
							}
						}

						.bottom {
							margin-top: 10rpx;
							display: flex;
							flex-direction: row;
							align-items: center;

							.skillItem {
								padding: 0 4rpx;
								height: 28rpx;
								background: #f6f6f6;
								border-radius: 4rpx;
								margin-right: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #666666;
							}
						}
					}

					.content {
						padding-top: 14rpx;
						width: 100%;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						text-overflow: ellipsis;
						white-space: normal;
					}
				}

				.recommend {
					position: absolute;
					top: 0;
					right: 0;
					width: 136rpx;
					height: 38rpx;
					z-index: 99;
				}
			}
		}
	}

	.warm-tip {
		width: 100%;
		background: #ffffff;
		padding: 28rpx 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 16rpx;

		.title {
			width: 100%;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
		}
	}

	.empty {
		width: 100%;
		height: 218rpx;
	}

	.foot_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 260rpx;
		position: fixed;
		bottom: 0;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);


		.agreement {
			width: 100%;
			height: 58rpx;
			background: #ffffff;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// flex-direction: row;
			// margin-bottom: 16rpx;
			margin: 10rpx 0 60rpx 0;
			padding: 0 12rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			.size1 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
			}

			.size2 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #73F0EA;
			}
		}

		.btn_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 20rpx;
			width: 100%;

			// padding-bottom: 20rpx;
			.left {
				display: flex;
				flex-direction: column;
				flex: 1;
				padding-left: 48rpx;

				.price_box {
					display: flex;
					flex-direction: row;
					align-items: baseline;

					.unit {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #f37364;
					}

					.number {
						font-size: 48rpx;
						font-family: DIN, DIN-Bold;
						font-weight: 700;
						text-align: left;
						color: #f37364;
					}

					.size23 {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
					}

					.size24 {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #F37364;
					}
				}
			}

			.rightbtn {
				width: 346rpx;
				height: 88rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>